{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"服务列表",back:1} %}
{#    主分类未选择的时候需要选择主分类#}
    <div id="Cat1" class="bc13 scrollX-Box pad10 fs8 tac" v-if="cat1 < 0">
        <div class=" s1 scrollX-Item bcf mar2 padb10 padl3 padt3 padr3 pos-r" v-for="item,index in cats">
            <div class="wh15-15 flcc fs16 c12">
                <img class="wh15-15" :src="picUrl(item.pic)" alt="" onerror="this.src=pic404">
            </div>
            <div class="fs8 mart5"><mu-ripple @click="setCat1(index)">[[item.name]]</mu-ripple></div>
        </div>
    </div>

{#    主分类选择之后可以区分子分类#}
    <div id="Cat2" class="bc13 scrollX-Box pad10 fs8 tac" v-if="cat1 >= 0">
        <div class="scrollX-Item bcf mar2 padb10 padl3 padt3 padr3 pos-r">
            <div class="wh15-15 flcc fs16 c12"><span class="fa fa-angle-double-left"></span></div>
            <div class="fs8 mart5 c12"><mu-ripple @click="cat1=-1;cat2=-1">重选</mu-ripple></div>
        </div>
        <div class="scrollX-Item bcf mar2 padb10 padl3 padt3 padr3 pos-r" :class="cat2 == -1?'fwb':'op5'">
            <div class="wh15-15 flcc fs16 c1">
                <img class="wh15-15" :src="picUrl(cats[cat1].pic)" alt="" onerror="this.src=pic404">
            </div>
            <div class="fs8 mart5"><mu-ripple @click="scrollXTo('#Cat2','.s1',0);setCat2(-1);">[[cats[cat1].name]]</mu-ripple></div>
        </div>
        <div class=" s1 scrollX-Item bcf mar2 padb10 padl3 padt3 padr3 pos-r" :class="cat2 == index?'fwb':'op5'" v-for="item,index in cats[cat1].sons">
            <div class="wh15-15 flcc fs16 c12">
                <img class="wh15-15" :src="picUrl(item.pic)" alt="" onerror="this.src=pic404">
            </div>
            <div class="fs8 mart5" :class="cat2 == index?'':''"><mu-ripple @click="scrollXTo('#Cat2','.s1',index+1);setCat2(index);">[[item.name]]</mu-ripple></div>
        </div>
    </div>

    <div class="flrc pad3 bcf c11 bdbso bdtso">
        <div class="flex1 tal padl6 pos-r padt5 padb5">
            服务列表
        </div>
        <div class="flex1 flrc pos-r padt5 padb5">
            <mu-menu cover  placement="bottom" :open.sync="timeOpen">
                <div class="fs8">不限资质 <span class="fa fa-sort-down"></span></div>
                <mu-list slot="content">
                    <mu-list-item button @click="setTag(3)">
                        <mu-list-item-title>保证金认证</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setTag(1)">
                        <mu-list-item-title>个人认证</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setTag(2)">
                        <mu-list-item-title>企业认证</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setTag(4)">
                        <mu-list-item-title>金牌服务商</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setTag(0)">
                        <mu-list-item-title>不限</mu-list-item-title>
                    </mu-list-item>
                </mu-list>
            </mu-menu>
        </div>
        <div class="flex1 flrc fs8">
            <mu-menu cover  placement="bottom" :open.sync="sortOpen">
                <div class="fs8">默认排序 <span class="fa fa-sort-down"></span></div>
                <mu-list slot="content">
                    <mu-list-item button @click="setOrder('')">
                        <mu-list-item-title>最新发布</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setOrder('price')">
                        <mu-list-item-title>价格排序</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setOrder('near')">
                        <mu-list-item-title>据我最近</mu-list-item-title>
                    </mu-list-item>
                </mu-list>
            </mu-menu>
        </div>
    </div>
    <div class="flrc">
        <div class="flex1 bcf round30 mar5 padl10 padr5 flrc bdso">
            <input v-model="keywords" class="flex1 marl5 tac" type="text" placeholder="请输入关键词检索">
            <div class="pos-r round  padl5 padr5">
                <mu-ripple @click="search()"><span class="fa fa-search c12"></span></mu-ripple>
            </div>
        </div>
    </div>
    <div class="pad5">
        <div class="mart30 pad10" v-if="!isTrue(list)">
            <div class="pad10 mar5 bdda round3 tac c12">暂无此类数据</div>
        </div>
        <div class="" v-for="item in list">
            {% include "ApiCloud/Base/inc.serv.list.base.html.twig" with {title:"发布任务",back:1} %}
        </div>
    </div>
{% endblock %}

{% block myJs %}
{% endblock %}
